iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0

經過前面兩天稍微了解了 HTML Service 後,今天我們要來開始實作我們的 To Do List 了!

今天我們分成三個部分進行:

  1. 建立假資料。

  2. 完成 GAS 程式設定。

  3. 完成 HTML。

就讓我們開始吧!


首先我們開啟我們塵封已久的 To Do List DB 試算表。

真的是許久不見了,空白了那麼久就讓我們來寵信你吧(金變態)。

開玩笑的!

我們首先先定義一下我們的資料欄位,我分為幾個部分 - 登錄時間、Key、事件 event、是否已經完成 isDone:

接下來我們來新增一些假資料:

一樣,金變態。

這樣就好了,沒錯,就是這麼簡單!

歐對了,你會發現 isDone 欄位我是使用 Check Box ,因為這樣在 Google Apps Script 中比較好處理。


接下來來到第二部分:完成 GAS 程式。

今天的部分因為我只是想要呈現資料,因此我就寫了兩個函式來處理:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function showToDoListData() {
  const datas = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0].getDataRange().getValues();
  return datas.slice(1);
}

跟 Day 16 一樣,第一個 doGet 負責處理 HTTP 的 GET 請求。

而第二個 showToDoListData 則是把資料吐給前端。

這樣就完成第二部分啦!


接下來是第三部分,其實才是最麻煩的地方…

因為畫面要呈現,所以勢必要看看如何呈現。

但是因為這系列文章的重點不是在前端網頁,所以我決定用最醜的方式書寫就好…

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function showData(datas) {
        const tbody = document.querySelector('#items');
        datasFormat = []
        datas.forEach(data => {
          datasFormat.push([data[2], data[3]])
        });
        datasFormat.forEach((data, index) => {
          const tr = document.createElement('tr');
          const count = document.createElement('td');
          count.innerText = index;
          tr.appendChild(count)
          data.forEach(item => {
            const td = document.createElement('td');
            td.innerText = item;
            tr.appendChild(td)
          });
          tbody.appendChild(tr);
        });
      }

      google.script.run.withSuccessHandler(showData)
          .showToDoListData();
    </script>
  </head>
  <body>
    <div id="app">
      <table>
        <thead>
          <tr>
            <th>編號</th>
            <th>事情</th>
            <th>是否完成</th>
          </tr>
        </thead>
        <tbody id="items"></tbody>
      </table>
    </div>
  </body>
</html>

完成了三步驟,我們來重新部署一下。

部署過程中一樣會要權限允許,就稍微按一下吧!

過程我就不 PO 了!

然後我們來看一下結果:

耶?東西怎麼都沒有跑出來?

看一下 console :

哇哩咧!?怎麼會是傳 null ?

這邊我修修改改修修改改,差點是以為我早上起床姿勢不對(?)才導致的 Bug 時,我又瞥到了可愛的 Docs :

簡單來說,不能直接傳 Array 啦!我們只能傳 Number , Boolean , String 或是 null 。

所以在 .gs 的部分必須要來處理一下:


function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function showToDoListData() {
  const datas = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0].getDataRange().getValues();
  return JSON.stringify(datas.slice(1));
}

這邊我把它利用 JSON.stringify 轉為字串傳出。

而 .html 的部分則是另外把他轉回 Array 型態:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function showData(datas) {
        const tbody = document.querySelector('#items');
        datasFormat = []
        JSON.parse(datas).forEach(data => {
          datasFormat.push([data[2], data[3]])
        });
        datasFormat.forEach((data, index) => {
          const tr = document.createElement('tr');
          const count = document.createElement('td');
          count.innerText = index;
          tr.appendChild(count)
          data.forEach(item => {
            const td = document.createElement('td');
            td.innerText = item;
            tr.appendChild(td)
          });
          tbody.appendChild(tr);
        });
      }

      google.script.run.withSuccessHandler(showData)
          .showToDoListData();
    </script>
  </head>
  <body>
    <div id="app">
      <table>
        <thead>
          <tr>
            <th>編號</th>
            <th>事情</th>
            <th>是否完成</th>
          </tr>
        </thead>
        <tbody id="items"></tbody>
      </table>
    </div>
  </body>
</html>

然後我們重新部署後來看一下結果吧!

OK~版型雖然難看,但是完成了!!


今天就到這裡囉!

也是平安的結束了一天呢!

今日作業:

把版型調整一下吧!

就到這裡囉!

明天見!

關於兔兔們:


我:今天週六,但是也莫名其妙的忙到了現在…到底我在忙什麼啊…?

上一篇
Day 16 — To Do List (3) 深入HTML Service -1
下一篇
Day 18 — To Do List (5) 新增 To Do Event
系列文
來自 GAS 的香氣~跟鳳黃酥一起享受 Google Apps Script 的午茶時光23
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言